<template>
  <div>
    <div class="content" :class="{ active: setHight == 1 }" @mouseleave="" v-loading="loading" element-loading-text="加载中...">
      <div class="b-menu">
        <div
          v-for="(item, i) in dataList"
          :key="i"
          class="menu-box"
          :class="{ active: BmenuActive == i }"
          @click="changeMenu(item, i)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="line"></div>
      <div class="c-menu">
        <div class="menu-box" v-for="(item, i) in Cmenu" :key="i">
          <div class="f-name">
            <p class="f-name-lable" @click="toPath(item)">{{ item.name }}</p>
            <el-icon style="height: 20px">
              <arrow-right-bold />
            </el-icon>
            <div class="d-name">
              <div class="d-name-box" v-for="(items, a) in item.children" :key="a" @click="goCate(item, items)">
                {{ items.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryList as categoryList } from "@/apis/shopHome/home";
import shopSelectStore from "@/store/modules/shopSelect";

export default {
  name: "SelectDown",
  data() {
    return {
      dataList: [],
      Bmenu: [],
      Cmenu: [],
      BmenuActive: 0,
      loading: false
    };
  },
  props: {
    setHight: Number,
    default: 0
  },
  created() {
    this.getCategoryList();
  },
  mounted() {},
  watch: {},
  methods: {
    toPath(item) {
      console.log("点击的二级分类===", item);
      this.$router.push({
        path: "/shopCategories/index",
        query: {
          categoryId: item.categoryId
        }
      });
    },
    getCategoryList() {
      this.loading = true;
      categoryList()
        .then(res => {
          this.dataList = res.data || [];
          this.Cmenu = this.dataList.length ? res.data[this.BmenuActive].children : [];
        })
        .finally(() => {
          this.loading = false;
        })
        .catch(() => {});
    },
    changeMenu(item, i) {
      this.BmenuActive = i;
      this.Cmenu = this.dataList?.length ? this.dataList[this.BmenuActive].children : [];

      // 没有二三级分类，直接更新列表数据
      if (this.Cmenu.length <= 0) {
        this.toPath({ categoryId: item.categoryId });
      }
    },
    goCate(item, children) {
      // console.log('点击了分类===', item, children,this.dataList,this.BmenuActive)
      shopSelectStore().setShopSelect(this.dataList[this.BmenuActive]);
      // if (this.$route.path === "/shopCategories/index") {
      //   return location.reload();
      // }
      const routeUrl = this.$router.resolve({
        path: "/shopCategories/index",
        query: {
          categoryId: children.categoryId
        }
      });
      window.open(routeUrl.href, "_blank");
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  width: 100vw;
  // min-height: 200px;
  border-radius: 4px;
  text-align: center;
  color: black;
  padding: 0 24px 0 24px;
  backdrop-filter: blur(2px);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 10px 10px 0px rgba(78, 89, 105, 0.4);
  border-radius: 0px 0px 10px 10px;

  .b-menu {
    padding-top: 21px;
    color: #4e5969;
    display: flex;
    padding-bottom: 10px;
    background: #fff;

    .menu-box {
      padding: 2px 5px;
      height: 32px;
      background: #fff;
      color: #4e5969;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      margin-right: 20px;
      border-radius: 4px 4px 4px 4px;

      &.active {
        color: #fff;
        background: #041830;
      }
    }
  }

  .line {
    width: 100%;
    height: 0px;
    border: 1.5px solid #dcdfe6;
  }

  .c-menu {
    min-height: 160px;
    padding-top: 26px;

    .menu-box {
      display: flex;

      .f-name {
        display: flex;
        justify-content: center;
        white-space: nowrap;
        .f-name-lable {
          margin-bottom: 30px;
        }
        div[class*=" el-icon-"] {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 30px;
        }

        .d-name {
          margin-left: 27px;
          display: flex;
          flex-wrap: wrap;

          .d-name-box {
            font-weight: 400;
            font-size: 14px;
            color: #3d3d3d;
            // width: 100px;
            text-align: center;
            margin-bottom: 30px;
            font-style: normal;
            text-transform: none;
            padding: 0 10px;

            &:hover {
              font-size: 15px;
              color: black;
              font-weight: 700;
              transform: scale(1.1);
              transition: all 0.2s;
            }
          }
        }
      }
    }
  }
}
</style>
